<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../../static/layui-v2.6.8/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../static/layui/dist/layuiadmin/style/admin.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>部门信息</legend>
  </fieldset>

  <div id="deptParent" class="demo-tree demo-tree-box"
    style="display: inline-block; width: 200px; height: 800px; overflow: scroll;"></div>
  <iframe id="info" style="display: inline-block;height: 800px;width: 1000px;" src="get_detail"
    frameborder=" 0"></iframe>
  <script src="../../../static/layui-v2.6.8/layui/layui.js" charset="utf-8"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

  <script>
    function listToTree(myId, pId, myName, list) {
      function exists(list, parentId) {
        for (var i = 0; i < list.length; i++) {
          if (list[i][myId] == parentId) return true;
        }
        return false;
      }
      //树节点
      var nodes = [];
      // get the top level nodes
      for (var i = 0; i < list.length; i++) {
        var row = list[i];
        row.title = row[myName];
        if (!exists(list, row[pId])) {
          nodes.push(row);

        }
      }
      var toDo = [];
      for (var i = 0; i < nodes.length; i++) {
        toDo.push(nodes[i]);

      }
      while (toDo.length) {
        var node = toDo.shift();    // the parent node
        // get the children nodes
        for (var i = 0; i < list.length; i++) {
          var row = list[i];
          row.title = row[myName];
          if (row[pId] == node[myId]) {
            //var child = {id:row.id,text:row.name};
            if (node.children) {
              node.children.push(row);
            } else {
              node.children = [row];
            }
            toDo.push(row);
          }
        }
      }
      return nodes;
    }
    var show = document.getElementById('info');
    layui.use(['tree', 'util'], function () {
      var tree = layui.tree
        , layer = layui.layer
        , util = layui.util,
        $ = layui.$
      $.ajax({
        type: 'POST',
        dataType: 'json',
        async: false,
        url: "department_info",
        data: {},
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true,
        contentType: 'application/x-www-form-urlencoded;charset=utf-8',
        success: function (data) {
          console.log(data.data)

          tree.render({
            isJump: true,
            elem: '#deptParent'  //绑定元素
            , click: function (obj) {
              console.log(obj.data); //得到当前点击的节点数据
              console.log(obj.state); //得到当前节点的展开状态：open、close、normal
              console.log(obj.elem); //得到当前节点元素
              console.log(obj.data.children); //当前节点下是否有子节点
              $('#deptParentId').val(obj.data.deptId);
              $('#deptParentId1').val(obj.data.deptName);

              document.getElementById("info").src = "get_detail?id=" + obj.data.deptId


            }
            , data: listToTree("deptId", "deptParentId", "deptName", data.data)
          });

        },
        error: function () {
          console.log('异常！');
        }
      });
    })

  </script>
</body>

</html>